<script lang='ts' setup>
import { reactive, Ref, ref } from 'vue';
import userDeptServiceApi from '/@/api/org/bean/user-dept'
import UnitSelectInput from '/@/views/org/unit/component/unit-select-input.vue'
//定义事件
const emits = defineEmits<{
    (e: 'save-success', data: any, res: any): void//保存成功回调
}>()

const props = defineProps({
    userDeptId: String,
    userId: String
})

//model-form ref对象
const JxtechModelFormRef = ref();

//表单数据
const UserDeptFormData: Ref<any> = ref({
    userDeptId: props.userDeptId
})


//定义必填校验规则
const rules = {
    unitName: [{ required: true, message: '请选择部门', trigger: 'blur' }],
    userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
    orderNum: [{ type: 'number', message: '请输入数字类型的值', trigger: 'blur' }],
}

//组件对象
const UserDeptFormState = reactive({
    primaryKey: 'userDeptId',
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onSaveSuccess: (formData: any, res: any) => {
        emits("save-success", formData, res)
    },
    callback: {
        preAdd: (formData: any) => {
            formData.userId = props.userId
        }
    }
})

//对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save()
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :service-api="userDeptServiceApi"
        :primary-key="UserDeptFormState.primaryKey"
        :form-data="UserDeptFormData"
        :rules="rules"
        :callback="UserDeptFormState.callback"
        @save-success="UserDeptFormState.onSaveSuccess"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <jxtech-model-form-item label="部门描述" prop="unitName">
                            <unit-select-input
                                v-model:unitId="UserDeptFormData.deptId"
                                v-model:unitName="UserDeptFormData.unitName"
                            ></unit-select-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="用户类型" prop="userType">
                            <jxtech-dictionary-select
                                placeholder="请选用户类型"
                                codeItemId="USER_TYPE"
                                v-model="UserDeptFormData.userType"
                            ></jxtech-dictionary-select>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="主要部门" prop="main">
                            <el-radio-group v-model="UserDeptFormData.main">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="在部门序号" prop="orderNum">
                            <el-input v-model.number="UserDeptFormData.orderNum"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>